<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
    <title>商品管理 - 钢域云贸</title>
    <link rel="icon" href="/uploads/logo.png" type="image/x-icon"/>
    <link rel="shortcut icon" href="/uploads/logo.png" type="image/x-icon"/>
    <link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css" media="all"/>
    <link rel="stylesheet" type="text/css" href="/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<!-- 公共头部 -->
<th:block th:replace="~{/header.html}"></th:block>
<th:block th:if="${session.user == null or session.user.role != 'SUPPLIER'}">
    <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6">
        <p>请以供应商身份登录！<a th:href="@{/login}" class="text-blue-600 hover:underline">立即登录</a></p>
    </div>
</th:block>

<!-- Main Content -->
<main class="container mx-auto my-8">
    <!-- Search and Filter -->
    <form th:action="@{/supplier/product}" method="get" class="flex flex-wrap items-center justify-between gap-4 mb-6 bg-white p-4 rounded-lg shadow">

        <!-- 左侧：搜索 + 分类 + 状态 -->
        <div class="flex flex-wrap items-center gap-4 flex-grow">
            <!-- 搜索框 -->
            <div class="relative w-full sm:w-64">
                <input type="text" name="search" th:value="${search}" placeholder="搜索商品…"
                       class="w-full pl-4 pr-10 py-2 rounded-full text-sm text-gray-800 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
                <button type="submit" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M21 21l-5-5m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                </button>
            </div>

            <!-- 分类筛选 -->
            <select id="categoryFilter" name="categoryId"
                    class="px-3 py-2 rounded-md border border-gray-300 text-sm focus:ring-2 focus:ring-blue-300">
                <option value="">所有分类</option>
                <option th:each="category : ${categories}" th:value="${category.id}"
                        th:text="${category.name}" th:selected="${category.id == categoryId}"></option>
            </select>

            <!-- 状态筛选 -->
            <select name="status"
                    class="px-3 py-2 rounded-md border border-gray-300 text-sm focus:ring-2 focus:ring-blue-300">
                <option value="">状态</option>
                <option value="1" th:selected="${status == 1}">上架</option>
                <option value="0" th:selected="${status == 0}">下架</option>
            </select>
        </div>

        <!-- 隐藏字段 -->
        <input type="hidden" name="page" value="1">
        <input type="hidden" name="size" value="10">

        <!-- 右侧：按钮组 -->
        <div class="flex items-center gap-3 shrink-0">
            <button type="submit"
                    class="flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
                <i class="fas fa-filter mr-2"></i> 筛选
            </button>

            <a th:href="@{/supplier/product}"
               class="flex items-center px-4 py-2 bg-gray-300 text-gray-800 rounded-md hover:bg-gray-400 transition">
                <i class="fas fa-redo mr-2"></i> 重置
            </a>

            <a th:href="@{/supplier/product/add}"
               class="flex items-center px-4 py-2 bg-white text-blue-600 border border-blue-600 rounded-md hover:bg-blue-50 transition">
                <i class="fas fa-plus mr-2"></i> 添加商品
            </a>
            <button type="button" onclick="showImportModal()"
                    class="flex items-center px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition">
                <i class="fas fa-upload mr-2"></i> 批量导入
            </button>
            <button type="button" onclick="showExportModal()"
                    class="flex items-center px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition">
                <i class="fas fa-download mr-2"></i> 导出商品
            </button>
        </div>
    </form>
    <!-- 批量导入模态框 -->
    <div id="importModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden flex items-center justify-center">
        <div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-md">
            <h2 class="text-lg font-semibold mb-4 text-gray-800">批量导入商品</h2>
            <form id="importForm" th:action="@{/supplier/product/batch-import}" method="post" enctype="multipart/form-data">
                <div class="mb-4">
                    <label for="excelFile" class="block text-gray-700 text-sm font-medium mb-2">Excel 文件（.xlsx）</label>
                    <input type="file" id="excelFile" name="excelFile" accept=".xlsx" required
                           class="border border-gray-300 rounded-md w-full py-2 px-3 text-sm text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-300">
                </div>
                <div class="flex justify-end gap-3">
                    <button type="button" onclick="hideImportModal()"
                            class="flex items-center px-4 py-2 bg-gray-300 text-gray-800 rounded-md hover:bg-gray-400 transition">
                        <i class="fas fa-times mr-2"></i> 取消
                    </button>
                    <button type="submit" id="submitButton"
                            class="flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition disabled:opacity-50"
                            disabled>
                        <i class="fas fa-upload mr-2"></i> 导入
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 导出模态框 -->
    <div id="exportModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden flex items-center justify-center">
        <div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-md">
            <h2 class="text-lg font-semibold mb-4 text-gray-800">导出商品</h2>
            <form th:action="@{/supplier/product/export}" method="get">
                <input type="hidden" name="search" th:value="${search}">
                <input type="hidden" name="categoryId" th:value="${categoryId}">
                <input type="hidden" name="status" th:value="${status}">
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-medium mb-2">选择导出字段</label>
                    <div class="space-y-2">
                        <label class="flex items-center gap-2">
                            <input type="checkbox" name="fields" value="商品名称" checked class="rounded border-gray-300 focus:ring-blue-300">
                            <span class="text-sm text-gray-700">商品名称</span>
                        </label>
                        <label class="flex items-center gap-2">
                            <input type="checkbox" name="fields" value="分类ID" checked class="rounded border-gray-300 focus:ring-blue-300">
                            <span class="text-sm text-gray-700">分类ID</span>
                        </label>
                        <label class="flex items-center gap-2">
                            <input type="checkbox" name="fields" value="规格" checked class="rounded border-gray-300 focus:ring-blue-300">
                            <span class="text-sm text-gray-700">规格</span>
                        </label>
                        <label class="flex items-center gap-2">
                            <input type="checkbox" name="fields" value="材质" checked class="rounded border-gray-300 focus:ring-blue-300">
                            <span class="text-sm text-gray-700">材质</span>
                        </label>
                        <label class="flex items-center gap-2">
                            <input type="checkbox" name="fields" value="库存" checked class="rounded border-gray-300 focus:ring-blue-300">
                            <span class="text-sm text-gray-700">库存</span>
                        </label>
                        <label class="flex items-center gap-2">
                            <input type="checkbox" name="fields" value="价格" checked class="rounded border-gray-300 focus:ring-blue-300">
                            <span class="text-sm text-gray-700">价格</span>
                        </label>
                        <label class="flex items-center gap-2">
                            <input type="checkbox" name="fields" value="发货地址" checked class="rounded border-gray-300 focus:ring-blue-300">
                            <span class="text-sm text-gray-700">发货地址</span>
                        </label>
                        <label class="flex items-center gap-2">
                            <input type="checkbox" name="fields" value="发货区域" checked class="rounded border-gray-300 focus:ring-blue-300">
                            <span class="text-sm text-gray-700">发货区域</span>
                        </label>
                    </div>
                </div>
                <div class="flex justify-end gap-3">
                    <button type="button" onclick="hideExportModal()"
                            class="flex items-center px-4 py-2 bg-gray-300 text-gray-800 rounded-md hover:bg-gray-400 transition">
                        <i class="fas fa-times mr-2"></i> 取消
                    </button>
                    <button type="submit"
                            class="flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
                        <i class="fas fa-download mr-2"></i> 导出
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Product Table -->
    <div class="bg-white p-6 rounded shadow">
        <table class="w-full table-auto">
            <thead>
            <tr class="border-b bg-gray-200">
                <th class="p-2 text-left">商品名称</th>
                <th class="p-2 text-left">分类</th>
                <th class="p-2 text-left">价格</th>
                <th class="p-2 text-left">库存</th>
                <th class="p-2 text-left">状态</th>
                <th class="p-2 text-left">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="product : ${products}" class="table-row border-b">
                <td class="p-2" th:text="${product.name}"></td>
                <td class="p-2" th:text="${product.categoryName}"></td>
                <td class="p-2" th:text="'¥' + ${#numbers.formatDecimal(product.price, 1, 2)}"></td>
                <td class="p-2" th:text="${product.inventory}"></td>
                <td class="p-2" th:text="${product.status == 1} ? '上架' : '下架'"></td>
                <td class="p-2">
                    <a th:href="@{/supplier/product/preview(id=${product.id})}" class="action-btn text-green-600 hover:text-green-800 mr-2">预览</a>
                    <a th:href="@{/supplier/product/edit(id=${product.id})}" class="action-btn text-blue-600 hover:text-blue-800 mr-2">编辑</a>
                    <form th:action="@{/supplier/product/delete(id=${product.id})}" method="post" style="display:inline;">
                        <input type="hidden" name="_method" value="DELETE">
                        <button type="submit" class="action-btn text-red-600 hover:text-red-800" onclick="return confirm('确认删除？')">删除</button>
                    </form>
                </td>
            </tr>
            <tr th:if="${#lists.isEmpty(products)}">
                <td colspan="6" class="p-2 text-center text-gray-500">暂无商品</td>
            </tr>
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="flex flex-col items-center mt-6 space-y-3">
        <!-- 商品总数 -->
        <div class="text-gray-700">
            <span>共 <span th:text="${totalItems}"></span> 件商品</span>
        </div>
        <!-- 分页控件 -->
        <div class="flex justify-center space-x-2">
            <a th:href="@{/supplier/product(page=${currentPage - 1}, search=${search}, categoryId=${categoryId}, status=${status})}"
               th:classappend="${currentPage == 1} ? 'bg-blue-600 text-white px-4 py-2 rounded opacity-50 cursor-not-allowed' : 'bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700'"
               th:attr="disabled=${currentPage == 1} ? 'disabled' : null">上一页</a>
            <!-- 页码跳转 -->
            <div class="flex space-x-1">
                <a th:each="i : ${#numbers.sequence(1, totalPages)}"
                   th:href="@{/supplier/product(page=${i}, search=${search}, categoryId=${categoryId}, status=${status})}"
                   th:classappend="${i == currentPage} ? 'bg-blue-600 text-white px-3 py-1 rounded' : 'bg-gray-200 text-gray-700 px-3 py-1 rounded hover:bg-blue-200'"
                   th:text="${i}"></a>
            </div>
<!--            <span class="px-4 py-2" th:text="'第 ' + ${currentPage} + ' 页 / 共 ' + ${totalPages} + ' 页'"></span>-->
            <a th:href="@{/supplier/product(page=${currentPage + 1}, search=${search}, categoryId=${categoryId}, status=${status})}"
               th:classappend="${currentPage == totalPages} ? 'bg-blue-600 text-white px-4 py-2 rounded opacity-50 cursor-not-allowed' : 'bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700'"
               th:attr="disabled=${currentPage == totalPages} ? 'disabled' : null">下一页</a>
        </div>
    </div>
</main>
<!-- 公共底部 -->
<th:block th:replace="~{/footer.html}"></th:block>
<script>
    function showToast(message) {
        const toast = document.createElement('div');
        toast.style.position = 'fixed';
        toast.style.bottom = '20px';
        toast.style.right = '20px';
        toast.style.background = 'linear-gradient(to right, #4ade80, #22c55e)';
        toast.style.color = 'white';
        toast.style.padding = '12px 20px';
        toast.style.borderRadius = '10px';
        toast.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
        toast.style.display = 'flex';
        toast.style.alignItems = 'center';
        toast.style.zIndex = 9999;
        toast.style.minWidth = '250px';
        toast.style.fontSize = '16px';
        toast.style.fontWeight = 'bold';

        const messageSpan = document.createElement('span');
        messageSpan.textContent = message;

        const closeBtn = document.createElement('button');
        closeBtn.textContent = '✖️';
        closeBtn.style.marginLeft = 'auto';
        closeBtn.style.background = 'transparent';
        closeBtn.style.border = 'none';
        closeBtn.style.color = 'white';
        closeBtn.style.fontSize = '18px';
        closeBtn.style.cursor = 'pointer';

        closeBtn.onclick = function() {
            toast.remove();
        };

        toast.appendChild(messageSpan);
        toast.appendChild(closeBtn);

        document.body.appendChild(toast);

        setTimeout(() => {
            toast.remove();
        }, 3000);
    }

    function showImportModal() {
        document.getElementById('importModal').classList.remove('hidden');
    }

    function hideImportModal() {
        document.getElementById('importModal').classList.add('hidden');
    }

    function showExportModal() {
        document.getElementById('exportModal').classList.remove('hidden');
    }

    function hideExportModal() {
        document.getElementById('exportModal').classList.add('hidden');
    }

    // 检查 URL 是否有 success=true
    if (window.location.search.includes('success=true')) {
        showToast('✅ 商品操作成功！');
    }
</script>
</body>
</html>